<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--  <link rel="stylesheet" type="text/css" th:href="@{/css/typeBook.css}" />-->
<!--</head>-->
<!--<body>-->

<!--<div th:each="books: ${books}" class="book-item"-->
<!--   th:href="@{/findBookid(book_id=${books.book_id})}">-->
<!--  <div class="box">-->
<!--    <div class="box-img">-->
<!--      <img th:if="${books.book_cover}" th:src="${books.bookCoverJpg}"/>-->
<!--    </div>-->
<!--    <div class="box-content">-->
<!--      <h3 th:text='${books.book_name}'></h3>-->
<!--      <p>Price: <span th:text='${books.book_price}'></span></p>-->
<!--      <p>Author: <span th:text='${books.author}'></span></p>-->
<!--    </div>-->
<!--  </div>-->
<!--</a>-->
<!--</div>-->

<!--</body>-->
<!--</html>-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" th:href="@{/css/typeBook.css}" />
  <link rel="stylesheet" type="text/css"  th:href="@{/css/homeHead.css}">
  <link rel="stylesheet" type="text/css"  th:href="@{/css/search.css}">
  <link rel="stylesheet" type="text/css"  th:href="@{/css/type.css}">
</head>
<body>
<div class="head">
  <div class="head-info">
    <div class="head-left">书口浪尖书城</div>
    <div class="head-right">
      <a href="/borrowPage" class="head-btn">我的借阅</a>
      <a href="/findAllBookInCart" class="head-btn" style="text-decoration:none;">购物车</a>
    </div>
  </div>
</div>

<div class="search-bar">
  <form th:action="@{/search}" method="get">
    <input type="text" class="search-input" name="keyword" placeholder="请输入搜索内容">
    <button type="submit" class="search-button">搜索</button>
  </form>
</div>

<div class="nav-bar">
  <div class="nav-item">
    <button class="nav-btn" data-category="all">全部</button>
    <div class="nav-line"></div>
  </div>
  <div class="nav-item">
    <form action="/findAllBookByType">
      <input type="hidden" name="category" value="education">
      <button type="submit" class="nav-btn" data-category="education">教育</button>
    </form>
    <div class="nav-line"></div>
  </div>
  <div class="nav-item">
    <button class="nav-btn" data-category="life">生活</button>
    <div class="nav-line"></div>
  </div>
  <div class="nav-item">
    <button class="nav-btn" data-category="business">经营</button>
    <div class="nav-line"></div>
  </div>
  <div class="nav-item">
    <button class="nav-btn" data-category="social">社科</button>
    <div class="nav-line"></div>
  </div>
  <div class="nav-item">
    <button class="nav-btn" data-category="arts">文艺</button>
    <div class="nav-line"></div>
  </div>
  <div class="nav-item">
    <button class="nav-btn" data-category="teaching">教辅</button>
    <div class="nav-line"></div>
  </div>

</div>



<div id="box-container">
  <div onclick="document.location.href = this.getAttribute('href');"
          th:each="books: ${books}" class="book-item"
       th:href="@{findBookid?book_id={id}(id=${books.book_id})}">
    <div class="box">
      <div class="box-img">
        <img th:if="${books.book_cover}" th:src="${books.bookCoverJpg}"/>
      </div>
      <div class="box-content">
        <p>Price: <span th:text='${books.book_name}'></span></p>
        <p>Price: <span th:text='${books.book_price}'></span></p>
        <p>Author: <span th:text='${books.author}'></span></p>
      </div>
    </div>
  </div>
</div>
</body>
</html>